<template>
	<view>
		<!-- 分类导航栏 -->
		<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap"/>
		
		<!-- 图文列表 -->
		<view class="uni-tab-bar">
			<swiper 
			class="swiper-box" 
			:style="{ 'height': swiperheight + 'px' }" 
			:current="tabIndex"
			@change="tabChange"
			>
				<swiper-item v-for="(items,index) in newslist" :key="index">
					<scroll-view scroll-y class="list">
						<block v-for="(item,key) in items.list" :key="key">
							<indexList :item="item" :index="key" />
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from '../../components/index/index-list.vue';
	import swiperTabHead from '../../components/index/swiper-tab-head.vue';
	export default {
		data() {
			return {
				swiperheight: 500,
				tabIndex: 0,
				tabBars: [{
				    name: '关注',
				    id: 'guanzhu'
				}, {
				    name: '推荐',
				    id: 'tuijian'
				}, {
				    name: '体育',
				    id: 'tiyu'
				}, {
				    name: '热点',
				    id: 'redian'
				}, {
				    name: '财经',
				    id: 'caijing'
				}, {
				    name: '娱乐',
				    id: 'yule'
				}],
				newslist:[
					{
						list:[
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:1,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:2,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							}
						]
					},
					{
						list:[
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:1,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:2,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							}
						]
					},
					{
						list:[
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:1,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:2,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							}
						]
					},
					{
						list:[
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:1,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:2,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							}
						]
					},
					{
						list:[
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:1,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:2,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							}
						]
					},
					{
						list:[
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:false,
								title:'我是标题',
								type:'img',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:0,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:1,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							},
							{
								userpic:'../../static/demo/userpic/12.jpg',
								username:'昵称',
								isguanzhu:true,
								title:'我是标题',
								type:'video',//img:图片，video:视频
								titlepic:'../../static/demo/datapic/11.jpg',
								playnum:21234,
								long:'2:47',
								infonum:{
									index:2,//0:未操作，1.顶，2.踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10
							}
						]
					}
				],
				list:[
					{
						userpic:'../../static/demo/userpic/12.jpg',
						username:'昵称',
						isguanzhu:false,
						title:'我是标题',
						type:'img',//img:图片，video:视频
						titlepic:'../../static/demo/datapic/11.jpg',
						playnum:21234,
						long:'2:47',
						infonum:{
							index:0,//0:未操作，1.顶，2.踩
							dingnum:11,
							cainum:11
						},
						commentnum:10,
						sharenum:10
					},
					{
						userpic:'../../static/demo/userpic/12.jpg',
						username:'昵称',
						isguanzhu:true,
						title:'我是标题',
						type:'video',//img:图片，video:视频
						titlepic:'../../static/demo/datapic/11.jpg',
						playnum:21234,
						long:'2:47',
						infonum:{
							index:1,//0:未操作，1.顶，2.踩
							dingnum:11,
							cainum:11
						},
						commentnum:10,
						sharenum:10
					},
					{
						userpic:'../../static/demo/userpic/12.jpg',
						username:'昵称',
						isguanzhu:false,
						title:'我是标题',
						type:'img',//img:图片，video:视频
						titlepic:'../../static/demo/datapic/11.jpg',
						playnum:21234,
						long:'2:47',
						infonum:{
							index:0,//0:未操作，1.顶，2.踩
							dingnum:11,
							cainum:11
						},
						commentnum:10,
						sharenum:10
					},
					{
						userpic:'../../static/demo/userpic/12.jpg',
						username:'昵称',
						isguanzhu:true,
						title:'我是标题',
						type:'video',//img:图片，video:视频
						titlepic:'../../static/demo/datapic/11.jpg',
						playnum:21234,
						long:'2:47',
						infonum:{
							index:2,//0:未操作，1.顶，2.踩
							dingnum:11,
							cainum:11
						},
						commentnum:10,
						sharenum:10
					},
					{
						userpic:'../../static/demo/userpic/12.jpg',
						username:'昵称',
						isguanzhu:false,
						title:'我是标题',
						type:'img',//img:图片，video:视频
						titlepic:'../../static/demo/datapic/11.jpg',
						playnum:21234,
						long:'2:47',
						infonum:{
							index:0,//0:未操作，1.顶，2.踩
							dingnum:11,
							cainum:11
						},
						commentnum:10,
						sharenum:10
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success(res) {
					this.swiperheight = res.windowHeight - uni.upx2px(100);
				}
			})
		},
		// 监听搜索框点击事件（哪个页面有配置顶部搜索框就在哪个页面上使用）
		onNavigationBarSearchInputClicked(){
			//跳转到搜索页面
			uni.navigateTo({
				url:'../search/search'
			})
		},
		// 监听原生按钮点击事件
		onNavigationBarButtonTap(e) {
			// e.index 代表按钮的索引
			console.log('按钮的索引:',JSON.stringify(e.index));
			switch (e.index){
				case 1:
				    uni.navigateTo({
				    	url:"../add-input/add-input"
				    });
					break;
				default:
					break;
			}
		},
		methods:{
			//tabbar点击事件
			tabTap(index){
				this.tabIndex = index;
			},
			//滑动事件
			tabChange(e){
				this.tabIndex = e.detail.current;
			}
		},
		components:{
			indexList,
			swiperTabHead
		}
	}
</script>

<style scoped>
</style>
